<template>
  <div>
    <component-head></component-head>
    <!-- 主体内容 -->
      <div class="content">
        <!-- 详情轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item 
            v-for="item in datail.pics"
            :key="item.id">
            <img :src="item.pic" alt="">
          </van-swipe-item>
        </van-swipe>
        <div class="bannercontent">
          <div class="youhui">
            <div v-if="datail.basicInfo">定金￥{{ datail.basicInfo.minPrice }}</div>
            <div v-if="datail.basicInfo">可低￥{{ datail.basicInfo.minPrice}}</div>
          </div>
          <span>到手价</span>
          <p v-if="datail.basicInfo">￥{{ datail.basicInfo.minPrice}}</p>
          <i v-if="datail.basicInfo">{{ datail.basicInfo.name }}</i>
          <div v-if="datail.basicInfo" class="contents"  v-html="datail.content">
          </div>
        </div>
        <!-- 商品导航 -->
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" @click="$router.push('/home')" />
          <van-goods-action-icon :badge="item.length?item.length:''" icon="cart-o" text="购物车" @click="$router.push('/car')" />
          <van-goods-action-icon icon="shop-o" text="店铺" @click="$router.push('/cate')" />
          <van-goods-action-button type="warning" text="加入购物车" @click="add" />
          <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
        </van-goods-action>
        <!-- 弹出层===>立即购买 -->
        <van-popup v-model="show" :style="{ height: '45%' }" position="bottom">
            <van-card v-if="sku"
              :num="sku.num"
              :price="sku.minPrice"
              desc="描述信息"
              :title="sku.name"
              :thumb="sku.pic"
            />
            <van-stepper v-model="sku.num" />
            <van-button @click="enterOrder" type="danger">点击购买</van-button>
        </van-popup>
        <!-- 弹出层===>加入购物车  -->
          <van-popup v-model="show1" :style="{ height: '45%' }" position="bottom">
              <van-card v-if="sku"
                :num="sku.num"
                :price="sku.minPrice"
                desc="描述信息"
                :title="sku.name"
                :thumb="sku.pic"
              />
              <van-stepper v-model="sku.num" />
              <van-button @click="addCar" type="danger">加入购物车</van-button>
          </van-popup>
      </div>
  </div>
</template>

<script>
import componentHead from '@/components/componentHead'
import { fetchdetail } from '@/api/request'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  components: {
    componentHead
  },
  data () {
    return {
      datail: {},
      show: false,
      show1: false,
      sku: {
      }
    }
  },
  computed: {
    ...mapState({
      item: (state) => state.cardata.items
    })
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    enterOrder () {
      // 点击立即购买，商品加入购物车并去订单页
      this.addCar()
      this.$router.push('/order')
    },
    add () {
      this.show1 = !this.show1
    },
    addCar () {
      this.setAddCar(this.datail.basicInfo)
      this.PriceTotal()
      this.show1 = false
    },
    fetchDetail () {
      fetchdetail({id:this.$route.params.id}).then( res => {
        console.log(res)
        if(res.data.code == 0){
          this.datail = res.data.data
          this.sku = res.data.data.basicInfo
        }
      })
    },
    onClickButton () {
      this.show = !this.show
    },
    ...mapMutations('cardata', ['setAddCar', 'PriceTotal'])
  }
}
</script>

<style lang="scss" scoped>
  
   .content{
     margin-bottom: 50px;
     margin-top: 46px;
      .my-swipe img{
        width: 100%;
        height: 100%;
      }
      .van-button{
        width: 100%;
      }
      .bannercontent{
        .youhui{
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 65.11px;
          background: red;
          font-size: 16px;
          color: white;
          font-weight: bold;
          padding-left: 10px;
          div{
            height: 20px;
            width: 255px;
          }
        }
        span{
          font-size: 14px;
          padding-left: 10px;
        }
        p{
          font-size: 20px;
          font-weight: bold;
          color: red;
          padding-left: 10px;
        }
        i{
          font-style: normal;
          font-size: 14px;
          margin-left: 10px;
        }
        img{
          width: 100%;
        }
       /deep/ .contents{
            img{
              vertical-align: middle;
            }
          .wscnph{
            width: 100%;
          }
        }
      }
    }
</style>
